import {View,  Text, ScrollView} from '@tarojs/components'
import AtComponent from "taro-ui/dist/weapp/common/component";
import "./listscrollview.less"
import FontIcon from "../FontIcon"
import { AtDivider } from 'taro-ui'
const fillhight=wx.getSystemInfoSync().windowHeight;

class ListScrollView extends AtComponent {

  constructor(props) {
    super(props)
    this.state = {
      r_title: "🚗 下拉可刷新",
      r_top: 100,
      b_title:"正在加载",
      loadmore:false,
      hasMore:true,
      noData:"",
      bottom_height:(this.props.bottom_height||this.props.bottom_height===0)?this.props.bottom_height:50
    }
  }


  componentWillMount()
  {
    this.refirsh=false
    this.tocheing=false;
  }
  tochstart()
  {
    this.tocheing=true;
    // this.refirsh=false
  }
  getScroll(t,e)
  {
    if(this.timer)
    {
      clearTimeout(this.timer);
    }
    this.s_top=e.detail.scrollTop
    this.timer=setTimeout(()=>{
      this.dorefirsh();
    },10)
  }
  componentDidMount()
  {
    this.refirshCallback();
  }
  refirshCallback()
  {
    this.props.onRefresh&&this.props.onRefresh((hasdata)=>{
      console.log(hasdata)
      setTimeout(()=>{
        this.setState({
          hasMore:true,
          loadmore:false,
          noData:hasdata,
          r_top:100,
          r_title:"🚗 下拉可刷新"
        })

        this.refirsh=false;
      },200)
    })
  }
  dorefirsh()
  {

    if(this.refirsh)
    {
      console.log("正在干");
      return;
    }
    //没松手,显示要他松手
    if(this.s_top<=30&&this.tocheing&&this.state.r_title!="🚙 松开刷新!")
    {
      this.setState({
        r_title:"🚙 松开刷新"
      })
    }
    //如果手己经松开
    if(this.s_top<=30&&!this.tocheing)
    {
      this.refirsh=true
      this.setState({
        r_top:40,
        r_title:"🚌 正在刷新"
      })
      this.refirshCallback()

    }
    if(this.s_top>30&&this.s_top<100&&!this.tocheing){
      console.log("不用干")
      this.setState({
        r_top:this.s_top,
      },()=>{
        this.setState({
          r_top:100,
        })})
      this.refirsh=false;
    }
    return;
    if(this.s_top<=30)
    {
      this.refirsh=true
      this.setState({
        r_top:50,
        r_title:"🚙 松开刷新"
      })
      this.refirsh=true;
      console.log("可以干")

      setTimeout(()=>{
        this.setState({
          r_top:100,
          r_title:"🚗 下拉可刷新"
        })

        this.refirsh=false;
      },1000)

    }else if(this.s_top>30&&this.s_top<100){
      console.log("不用干")
      this.setState({
        r_top:this.s_top,
      },()=>{
        this.setState({
          r_top:100,
        })})}
    this.refirsh=false;




  }
  tochend()
  {
    this.tocheing=false;
    this.dorefirsh();

  }
  getloadmore(e)
  {
    if(this.state.loadmore||!this.state.hasMore)
    {
      return;
    }
    this.setState({
      loadmore:true
    })

    this.props.onLoadMore&&this.props.onLoadMore((hasMore=false)=>{
      this.setState({
        loadmore:false,
        hasMore:hasMore
      })
    })

    // this.props.loadmore&&this.props.loadmore();
  }

  render()
  {
    return(

      <ScrollView style={{height:fillhight+50-this.state.bottom_height+"px",background:"#f4f4f4"}}   scroll-y={true}
                  onScrollToLower={this.getloadmore.bind(this)}
                  scroll-top={this.state.r_top}
                  onScroll={this.getScroll.bind(this)}
                  onTouchend={this.tochend.bind(this)}
                  onTouchstart={this.tochstart.bind(this)}
                  scroll-with-animation={true}

      >
        <View  style={{height:"100px",display:"flex",alignItems:"flex-end",justifyContent:"center"}}>
          <Text style={{fontSize:"14px",color:"#58595b",marginBottom:"10px"}}>{this.state.r_title}</Text>
        </View>
        <View style={{minHeight:(fillhight+50)+"px"}}>
        {this.props.children}
          <View style={{background:"#ffffff"}}>
            {this.state.loadmore&&<AtDivider >
              <View  style={{height:"40px",display:"flex",alignItems:"center",justifyContent:"center"}}>
                <View className="Rotation" >
                  <FontIcon className="icon icon-loading" />
                </View>
                <View style={{marginLeft:"10px"}}>
                  <Text  style={{fontSize:"14px",color:"#58595b",marginBottom:"10px"}}>{this.state.b_title}</Text>
                </View>
              </View>
            </AtDivider>}
            {(!this.state.hasMore&&!this.state.noData)&&<AtDivider >
              <View  style={{height:"40px",display:"flex",alignItems:"center",justifyContent:"center"}}>

                <View style={{}}>
                  <Text  style={{fontSize:"14px",color:"#58595b",marginBottom:"10px"}}>
                    没有更多了
                  </Text>
                </View>
              </View>
            </AtDivider>}
            {this.state.noData&&<AtDivider >
              <View  style={{height:"40px",display:"flex",alignItems:"center",justifyContent:"center"}}>

                <View style={{}}>
                  <Text  style={{fontSize:"14px",color:"#58595b",marginBottom:"10px"}}>
                    {this.state.noData}
                  </Text>
                </View>
              </View>
            </AtDivider>}
          </View>
        </View>


      </ScrollView>
    )
  }


}

export default ListScrollView

